<template>
	<view>
		<view class="cu-modal bottom-modal" :class="showModal?'show':''" @tap="showModal=false">
			<view class="cu-dialog border-radius-top bg-gray minheight " @tap.stop="">
				<view v-if="detail" class="padding-tb">
					<view class="text-center text-bold">
						还差{{detail.num - detail.join_num}}人拼团成功
					</view>
					<CountDown :value="detail.close_time" :skin="'skin2'" :beforTxt="'剩余：'"></CountDown>
					<view class="padding-tb-xl flex align-center justify-center">
						<view v-for="(item,index) in detail.logs" :key="index">
							<view class="cu-avatar lg round">
								<image :src="item.member.head_portrait" mode="aspectFill"></image>
								<view class="cu-tag badge" v-if="detail.member_id==item.member_id">团长</view>
							</view>
						</view>
					</view>
					<view class="margin-lr-xl">
						<view class="cu-btn lg margin-top round w100" :class="'bg-'+theme" @tap="submitJoinWholesale">一键参团</view>
					</view>
				</view>
				<view v-else>
					<view class="cu-load loading margin-tb-xl"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import CountDown from '@/components/default/CountDown.vue'
	export default {
		components: {
			CountDown
		},
		props: {
			value: {
				type: Object,
				default: null
			},
		},
		created: function(e) {},
		data() {
			return {
				CLOUDPATH: this.$config.cloudPath,
				theme: this.$config.THEME(),
				showModal: false,
				id:0,
				detail: null,
			}
		},
		methods: {
			joinWholesale(id) {
				this.id = id
				this.detail = null
				this.showModal = true
				this.getWholesale(id)
			},
			getWholesale(id) {
				this.$http
					.get('marketing_wholesale_view', {
						id: id
					})
					.then((response) => {
						this.detail = response.data.data
					})
					.catch((response) => {
						console.log(response)
					})
			},
			submitJoinWholesale(){
				this.$emit('submitJoinWholesale', this.id)
			}
		},
	}
</script>

<style>
</style>
